﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Setting.aspx.cs" Inherits="SF.Dict.Web.Setting" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>帐户设置 | 挚友云海</title>
	<script type="text/javascript" src="/Common/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="/Common/base.js"></script>
	<link href="/Common/base.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
		#wrap {
			min-height: 500px;
			background: url("/Common/images/wrap1911.png") repeat-x scroll center top #D2D8DE;
		}
		h1.logo a {
			font-size: 32px;
			font-weight: bold;
			text-decoration: none;
			color: #FFFFFF;
		}
		h1.logo a:hover {
			background: none;
		}
		.page-about #content {
			border-radius: 10px 10px 10px 10px;
			margin: 0 auto;
			position: relative;
			width: 840px;
			font-size: 14px;
			padding-bottom: 20px;
		}
		div#header {
			margin: 0 auto 35px;
			position: relative;
			width: 840px;
		}
		div#main {
			background: none repeat scroll 0 0 #FFFFFF;
			border-radius: 5px 5px 5px 5px;
			padding: 22px 28px;
		}
		div#aside {
			background-color: #F4F7FA;
			border-radius: 5px 5px 5px 5px;
			float: right;
			padding: 12px 18px;
			width: 200px;
		}
		.about-list .about-item {
			background: url("http://s.libdd.com/img/icon/about-icons.$1763.png") no-repeat scroll 0 10px transparent;
			height: 36px;
			line-height: 34px;
			overflow: hidden;
		}
		#aside .about-item .separator {
			border-bottom: 1px solid #FEFFFE;
			border-top: 1px solid #E2E6E8;
			border-width: 1px 0;
			margin: 0 0 10px;
			overflow: hidden;
		}
		.about-list .about-item.current a, .about-list .about-item.current a:link, .about-list .about-item.current a:visited, .about-list .about-item.current a:active, .about-list .about-item.current a:hover {
			color: #000000;
			font-weight: bold;
		}
		.about-list .about-item a, .about-list .about-item a:link, .about-list .about-item a:visited {
			color: #666666;
			display: block;
			outline: medium none;
			padding-left: 25px;
			text-decoration: none;
		}
		.about-list .about-item a:active, .about-list .about-item a:hover {
			color: #000000;
		}
		h2#main-title {
			color: #324F65;
			font-size: 32px;
			font-weight: normal;
			margin: 0 0 30px;
		}
		.one-position {
			border-top: 1px solid #D3D5D7;
			margin-top: 20px;
		}
		.one-position h4, .one-position h5 {
			color: #38546B;
			font-size: 16px;
			font-weight: normal;
			margin: 10px 0 10px;
		}
		.one-position p {
			line-height: 20px;
			padding: 3px 0;
			text-indent: 2em;
		}
		.one-position ul li, .one-position ol li {
			line-height: 20px;
			list-style: decimal outside none;
			margin-left: 30px;
			padding: 5px 0;
		}
		.input-text {
			border: 1px solid #E4E4E4;
			font-size: 12px;
			padding: 4px;
			width: 220px;
			color: #4F545A;
			border-radius: 3px 3px 3px 3px;
		}
		.setting-item .setting-item-main {
			font-size: 12px;
		}
		.setting-item {
			clear: both;
			background: #F5F5F5;
			margin-bottom: 4px;
		}
		.setting-item-main {
			background: none repeat scroll 0 0 #FFFFFF;
			margin-left: 150px;
			padding: 10px 5px 10px 20px;
			border: 1px solid #F5F5F5;
		}
		.setting-item label {
			color: #4F545A;
			display: block;
			float: left;
			font-size: 14px;
			font-weight: bold;
			padding: 10px 0px;
			text-align: right;
			width: 130px;
		}
		#setting-station .setting-item-main span {
			line-height: 20px;
			margin-right: 15px;
		}
		.p40 {
			width: 40px;
		}
		#setting-intro textarea {
			border: 1px solid #E4E4E4;
			font-size: 12px;
			padding: 4px;
			width: 220px;
			overflow: auto;
			color: #4F545A;
			height: 48px;
			border-radius: 3px 3px 3px 3px;
			resize: none;
		}
		ul {
			list-style: none outside none;
		}
		#setting-web li {
			padding: 4px 0px;
			height: 30px;
			padding-left: 8px;
		}
		#setting-web .setting-item-main span.web-name {
			color: #4F545A;
			display: block;
			font-weight: bold;
			padding-top: 4px;
			text-align: right;
			width: 70px;
			float: left;
			margin-right: 8px;
		}
		#setting-web .setting-item-main input {
			float: left;
		}
		#setting-submit {
			text-align: center;
			padding: 20px 0px;
		}
		a.blue-button {
			background: #2DA5D7;
			border: 1px solid #2192C1;
			border-radius: 4px 4px 4px 4px;
			color: #FFFFFF;
			cursor: pointer;
			display: block;
			font-size: 14px;
			height: 36px;
			line-height: 36px;
			padding: 0 20px;
			width: 50px;
			text-align: center;
			color: #FFF;
			margin: 0px auto;
		}
		#minipop-holder {
			clear: both;
			left: 554px;
			position: absolute;
			top: 838px;
			z-index: 1001;
		}
		.minipop {
			background: none repeat scroll 0 0 #FFFFFF;
			border: 1px solid #A0A0A0;
			border-radius: 3px 3px 3px 3px;
			box-shadow: 0 0 10px #777777;
			font-size: 12px;
			padding: 13px 25px;
			text-align: center;
		}
		.hide {
			display: none;
		}
		#popform {
			padding-bottom: 8px;
		}
		#popform label {
			color: #4F545A;
			display: inline-block;
			font-size: 12px;
			padding: 10px 0px;
			text-align: right;
			width: 60px;
		}
		#popform input {
			border: 1px solid #E4E4E4;
			font-size: 12px;
			padding: 4px;
			width: 130px;
			color: #4F545A;
			border-radius: 3px 3px 3px 3px;
		}
	</style>
	<script type="text/javascript">

		$(document).ready(
			function () {
				$('#profile-submit').bind("click", { fun: Setting, title: "确认保存？", argus: { again: false} }, ShowMiniHint);
				var email = '<div id="popform"><div><label>登录密码：</label><input id="pwd" type="password" /></div><div><label>新邮箱：</label><input  id="email" type="text" /></div><div id="poperror"></div></div>';
				$('#memail').bind("click", { fun:ModifyEmail, title: email, argus: { again: false} }, ShowMiniPop);
				var pwd = '<div id="popform"><div><label>旧密码：</label><input id="pwd" type="password" /></div><div><label>新密码：</label><input  id="npwd" type="text" /></div><div><label>再输入：</label><input  id="anpwd" type="text" /></div><div id="poperror"></div></div>';
				$('#mpwd').bind("click", { fun: ModifyPwd, title: pwd, argus: { again: false} }, ShowMiniPop);
			}
		);

		function ModifyEmail(argus){
			var pwd = $('#pwd').val();
			var email = $('#email').val();
			var again = argus.again;
			$.ajax({
				url: '/Submit/submit.ashx?page=setting&action=010&rnd=' + Math.random(),
				type: 'POST',
				timeout: 5000,
				dataType: "json",
				data: 'pwd=' + pwd + '&email=' + email,
				error: function () {
					if (again) {
						AddMiniHint('重试失败，请稍候再试');
						HideMiniPop(1500);
					}
					else {
						AddMiniHint('操作失败，<a class="action" onclick="ModifyEmail({again:true})">请重试</a>');
					}
				},
				success: function (json) {
					if (json.code == 0) {
						AddMiniHint('操作成功！');
						$('#login').html(email);
						HideMiniPop(1000);
					}
					else if(json.code == -160222 || json.code == -160220){
						$('#poperror').html(json.msg);
					}
					else {
						if (again) {
							AddMiniHint('重试失败，请稍候再试');
							HideMiniPop(1500);
						}
						else {
							AddMiniHint('操作失败，<a class="action" onclick="ModifyEmail({again:true})">请重试</a>');
						}
					}
				}
			});
		}
		
		function ModifyPwd(argus){
			var pwd = $('#pwd').val();
			var npwd = $('#npwd').val();
			var anpwd = $('#anpwd').val();

			var again = argus.again;
			$.ajax({
				url: '/Submit/submit.ashx?page=setting&action=011&rnd=' + Math.random(),
				type: 'POST',
				timeout: 5000,
				dataType: "json",
				data: 'pwd=' + pwd + '&npwd=' + npwd,
				error: function () {
					if (again) {
						AddMiniHint('重试失败，请稍候再试');
						HideMiniPop(1500);
					}
					else {
						AddMiniHint('操作失败，<a class="action" onclick="ModifyPwd({again:true})">请重试</a>');
					}
				},
				success: function (json) {
					if (json.code == 0) {
						AddMiniHint('操作成功！');
						HideMiniPop(1000);
					}
					else if(json.code == -160225 || json.code == -160224 || json.code == 160223){
						$('#poperror').html(json.msg);
					}
					else {
						if (again) {
							AddMiniHint('重试失败，请稍候再试');
							HideMiniPop(1500);
						}
						else {
							AddMiniHint('操作失败，<a class="action" onclick="ModifyPwd({again:true})">请重试</a>');
						}
					}
				}
			});
		}

		function Setting(argus) {

			if (userid == '') return;
			var again = argus.again;

			var o = {
				ac: $('#tb_account').val(),
				sex: $("input[name='sex']:checked").val() == undefined ? '' : $("input[name='sex']:checked").val(),
				birthday: $('#tb_birthday_year').val() + '-' + $('#tb_birthday_month').val() + '-' + $('#tb_birthday_day').val(),
				station: $("input[name='station']:checked").val(),
				intro: $('#tb_intro').val(),
				qq: $('#tb_qq').val(),
				sinaweibo: $('#tb_sinaweibo').val(),
				renren: $('#tb_renren').val(),
				qqweibo: $('#tb_qqweibo').val(),
				msn: $('#tb_msn').val(),
				qzone: $('#tb_qzone').val(),
				douban: $('#tb_douban').val(),
			};

			$.ajax({
				url: '/Submit/submit.ashx?page=voc&action=009&rnd=' + Math.random(),
				type: 'POST',
				timeout: 5000,
				dataType: "json",
				data: $.toJSON(o),
				error: function () {
					if (again) {
						AddMiniHint('重试失败，请稍候再试');
						HideMiniPop(1500);
					}
					else {
						AddMiniHint('操作失败，<a class="action" onclick="Setting({again:true})">请重试</a>');
					}
				},
				success: function (json) {
					if (json.code == 0) {
						AddMiniHint('操作成功！');
						HideMiniPop(1000);
					}
					else {
						if (again) {
							AddMiniHint('重试失败，请稍候再试');
							HideMiniPop(1500);
						}
						else {
							AddMiniHint('操作失败，<a class="action" onclick="Setting({again:true})">请重试</a>');
						}
					}
				}
			});
		}

		function ShowMiniPop(e) {
			var holder = $('#minipop-holder');
			$('#minipop-action').show();
			$('#minipop-hint').hide();
			holder.fadeIn();
			var offset = $(this).offset();
			$('#minipop-tip').html(e.data.title);

			holder.css({
				'top': offset.top - holder.outerHeight() - 5 + 'px',
				'left': offset.left - holder.outerWidth() / 2 + 12 + 'px'
			});

			$('#minipop-submit').bind('click', e.data.argus, e.data.fun);
		}

		function ShowMiniHint(e) {
			var holder = $('#minipop-holder');
			$('#minipop-action').hide();
			$('#minipop-hint').show();
			holder.fadeIn();
			$('#minipop-hint-tip').html('<img src="/Common/images/ajax-loader.gif" style="vertical-align:middle" />&nbsp;&nbsp;正在提交...');
			var offset = $(this).offset();

			holder.css({
				'top': offset.top - holder.outerHeight() - 5 + 'px',
				'left': offset.left - holder.outerWidth() / 2 + 12 + 'px'
			});
			e.data.fun(e.data.argus);
		}

		function AddMiniHint(content) {
			$('#minipop-hint-tip').html(content);
			$('#minipop-action').hide();
			$('#minipop-hint').show();
		}

		function HideMiniPop(timeout) {
			$('#minipop-submit').unbind();
			if (timeout) {
				$('#minipop-holder').fadeOut(timeout);
			}
			else {
				$('#minipop-holder').hide();
			}
		}

	</script>
</head>
<body>
	<form id="form1" runat="server">
	<div class="page-about" id="wrap">
		<div id="header">
			<h1 class="logo">
				<a title="挚友云海" href="/">挚友云海</a></h1>
		</div>
		<div id="content">
			<div id="main">
				<h2 id="main-title">
					帐户设置</h2>
				<div id="setting-email" class="setting-item">
					<label>
						电子邮件地址:</label>
					<div class="setting-item-main">
						<span id="login">
							<asp:Literal runat="server" ID="ltl_login"></asp:Literal></span> <a id="memail" class="acion"
								href="javascript:void(0)">更换</a>
					</div>
				</div>
				<div id="setting-password" class="setting-item">
					<label>
						当前密码:</label>
					<div class="setting-item-main">
						<span>******</span> <a class="acion" id="mpwd" href="javascript:void(0)">修改密码</a>
					</div>
				</div>
				<div id="setting-account" class="setting-item">
					<label>
						昵 称:</label>
					<div class="setting-item-main">
						<asp:TextBox runat="server" ID="tb_account" TextMode="SingleLine" CssClass="input-text"></asp:TextBox>
					</div>
				</div>
				<div id="setting-sex" class="setting-item">
					<label>
						性 别:</label>
					<div class="setting-item-main">
						<span>
							<input name="sex" value="男人" type="radio" />男人</span> <span>
								<input name="sex" value="女人" type="radio" />女人</span>
					</div>
				</div>
				<div id="setting-birthday" class="setting-item">
					<label>
						生 日:</label>
					<div class="setting-item-main">
						<span>
							<asp:TextBox runat="server" ID="tb_birthday_year" TextMode="SingleLine" CssClass="input-text p40"></asp:TextBox>年</span>
						<span>
							<asp:TextBox runat="server" ID="tb_birthday_month" TextMode="SingleLine" CssClass="input-text p40"></asp:TextBox>月</span>
						<span>
							<asp:TextBox runat="server" ID="tb_birthday_day" TextMode="SingleLine" CssClass="input-text p40"></asp:TextBox>日</span>
					</div>
				</div>
				<div id="setting-station" class="setting-item">
					<label>
						身 份:</label>
					<div class="setting-item-main">
						<span>
							<input name="station" value="老年人" type="radio" />老年人</span> <span>
								<input name="station" value="上班族" type="radio" />上班族</span> <span>
									<input name="station" value="学生" type="radio" />学 生</span> <span>
										<input name="station" value="小朋友" type="radio" />小朋友</span>
					</div>
				</div>
				<div id="setting-intro" class="setting-item">
					<label>
						一句话介绍:</label>
					<div class="setting-item-main">
						<asp:TextBox runat="server" ID="tb_intro" TextMode="MultiLine" CssClass="input-text"></asp:TextBox>
					</div>
				</div>
				<div id="setting-web" class="setting-item">
					<label>
						个人帐号或网站:</label>
					<div class="setting-item-main">
						<ul>
							<li style="background: url('/Common/images/logo-qq.png') no-repeat scroll 5px 9px transparent;"
								class="qq" id="anchor-qq"><span class="web-name">QQ帐号</span>
								<asp:TextBox runat="server" ID="tb_qq" TextMode="SingleLine" CssClass="input-text"></asp:TextBox>
							</li>
							<li style="background: url('/Common/images/logo-msn.png') no-repeat scroll 5px 9px transparent;"
								class="qq" id="anchor-msn"><span class="web-name">QQ帐号</span>
								<asp:TextBox runat="server" ID="tb_msn" TextMode="SingleLine" CssClass="input-text"></asp:TextBox>
							</li>
							<li style="background: url('/Common/images/logo-sinaweibo.png') no-repeat scroll 5px 9px transparent;"
								class="sinaweibo" id="anchor-sinaweibo"><span class="web-name">新浪微博</span>
								<asp:TextBox runat="server" ID="tb_sinaweibo" TextMode="SingleLine" CssClass="input-text"></asp:TextBox>
							</li>
							<li style="background: url('/Common/images/logo-qqweibo.png') no-repeat scroll 5px 9px transparent;"
								class="qqweibo" id="anchor-qqweibo"><span class="web-name">腾讯微博</span>
								<asp:TextBox runat="server" ID="tb_qqweibo" TextMode="SingleLine" CssClass="input-text"></asp:TextBox>
							</li>
							<li style="background: url('/Common/images/logo-douban.png') no-repeat scroll 5px 9px transparent;"
								class="douban" id="anchor-douban"><span class="web-name">豆 瓣</span>
								<asp:TextBox runat="server" ID="tb_douban" TextMode="SingleLine" CssClass="input-text"></asp:TextBox>
							</li>
							<li style="background: url('/Common/images/logo-qzone.gif') no-repeat scroll 5px 9px transparent;"
								class="qzone" id="anchor-qzone"><span class="web-name">QQ空间</span>
								<asp:TextBox runat="server" ID="tb_qzone" TextMode="SingleLine" CssClass="input-text"></asp:TextBox>
							</li>
							<li style="background: url('/Common/images/logo-renren.png') no-repeat scroll 5px 9px transparent;"
								class="last renren" id="anchor-renren"><span class="web-name">人人网</span>
								<asp:TextBox runat="server" ID="tb_renren" TextMode="SingleLine" CssClass="input-text"></asp:TextBox>
							</li>
						</ul>
					</div>
				</div>
				<div id="setting-submit" class="setting-item">
					<a class="blue-button" id="profile-submit" href="javascript:void(0)">保存</a>
				</div>
			</div>
		</div>
		<div id="minipop-holder" class="hide">
			<div id="minipop-action" class="minipop">
				<div class="gray6">
					<div id="minipop-tip">
					</div>
				</div>
				<div class="btn-holder">
					<span><a id="minipop-submit" href="javascript:void(0)" class="action">确定</a></span>&nbsp;&nbsp;
					<span><a href="javascript:void(0)" onclick="HideMiniPop()" class="action">取消</a>
					</span>
				</div>
			</div>
			<div id="minipop-hint" class="minipop hide">
				<div class="gray6">
					<div id="minipop-hint-tip">
					</div>
				</div>
			</div>
		</div>
	</div>
	</form>
</body>
</html>
